<template>
  <div>
    <div class="list">
      <dl v-for="item in houseList" :key="item.id">
        <dt><img :src="item.img" alt="" /></dt>
        <dd>
          <h3>{{ item.estate_name }}</h3>
          <p class="detail">
            <span>{{ item.acreage }}</span
            >/ <span>{{ item.room }}室{{ item.living_room }}厅</span>/
            <span>{{ item.city }}</span>
          </p>

          <p>
            <span class="price">{{ item.price }}</span>
          </p>

          <p>
            <span class="xiao">小区</span>
            <span class="order" @click="pay()">去支付 ></span>
          </p>
        </dd>
      </dl>
    </div>
  </div>
</template>

<script>
import { getHouseList } from "../../server";
import {pay} from "../../server"
export default {
  data() {
    return {
      houseList: [],
    };
  },
  async created() {
    let res = await getHouseList();
    if (res.code == 200) {
      this.houseList = res.data.splice(2, 3);
    }
    console.log(this.houseList);
  },
  methods: {
    async pay() {
      console.log(1111);
      //调用
      let result = await pay({ total_fee: 1});
      //结构
      let { timeStamp, nonceStr, paySign } = result.data;
      wx.requestPayment({
        timeStamp,
        nonceStr,
        package: result.data.package,
        signType: "MD5",
        paySign,
        success: (res) => {
          if (res.errMsg == "requestPayment:ok") {
            wx.showToast({
              title: "订单支付成功",
            });
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.list {
  width: 96%;
  margin-left: 2%;
  dl {
    width: 100%;
    height: 300rpx;
    display: flex;
    border-bottom: 1px solid #eee;

    dt {
      width: 300rpx;
      height: 200rpx;
      padding-top: 60rpx;
      img {
        width: 300rpx;
        height: 200rpx;
      }
    }
    dd {
      padding-top: 60rpx;
      padding-left: 20rpx;
      h3 {
        font-weight: 700;
        font-size: 35rpx;
      }
      .detail {
        font-size: 28rpx;
        color: #333;
        margin-top: 10rpx;
        margin-bottom: 10rpx;
      }

      .price {
        font-weight: 600;
        color: #ff9900;
      }
      .xiao {
        display: inline-block;
        width: 80rpx;
        height: 40rpx;
        font-size: 25rpx;
        text-align: center;
        line-height: 40rpx;
        background-color: #eee;
        margin-top: 10rpx;
      }
      .order {
        width: 150rpx;
        height: 50rpx;
        display: inline-block;
        background-color: red;
        margin-left: 100rpx;
        text-align: center;
        line-height: 50rpx;
        font-size: 25rpx;
        font-weight: 600;
        color: #fff;
      }
    }
  }
}
</style>